<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-resource.min.js"></script>

</head>
<body>
	<div class="container" id="app">
		<div class="queryArea">
		    <input type="text" id="queryIn" v-model="keyword" placeholder="输入用户名查找用户" >
		    <button class="btn btn-default" id="queryBtn" v-on:click="query" >find</button>
		</div>
		<div v-if="message && !members">{{message}}</div>
		<table class="table table-hover" v-else>
			<tr v-for="m in members">
				<td>{{m.id}}</td>
				<td>{{m.username}}</td>
				<td>{{m.password}}</td>
				<td v-on:click="hello">操作</td>
			</tr>
		</table>
		
	</div>
	<script type="text/javascript">
		var z;
			
		Vue.http.options.emulateJSON = true;
		var z = new Vue({
			el: "#app",
			data: {members: null, message: "初始化数据中...", keyword:null},
			ready: function() {
				this.$http.get('member?method=allMembers').then(function(response) {
					this.$set('members', response.data);
				}).catch(function(response) {
					alert(response.status);
				});
			},
			methods: {
				query: function() {
					this.$http.post('member', {method:"query", keyword:this.keyword} ).then(function(response) {
						this.$set('members', response.data);
						if (this.members.length == 0) {
							this.members = null;
							this.message = "未查找到符合数据";
						}
					}).catch(function(response) {
						alert(response.status);
					});
				}, 
				hello: function() {
					alert(this.message);
				}
			}
		});
	</script>
</body>
</html>